<template>
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
        <FormItem prop="username">
            <Input clearable  v-model="form.username" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input clearable  type="password"  v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
            </Input>
        </FormItem>
        <FormItem prop="captcha">
            <div class="captcha-center">
                <Input clearable  style="width:60%" type="text" :maxlength="6" v-model="form.captcha" placeholder="请输入验证码">
                    <span slot="prepend">
                    <Icon :size="14" type="md-lock"></Icon>
                    </span>
                </Input>
                <img class="captcha" :src="url" @click="changeCodeImg()">
            </div>
        </FormItem>
        <FormItem>
            <Button @click="handleSubmit" type="primary" long>登录</Button>
        </FormItem>
    </Form>
</template>
<script>
import { number } from 'echarts/lib/export';
export default {
    name: 'LoginForm',
    props: {
        emailRules: {
            type: Array,
            default: () => {
                return [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ];
            }
        },
        passwordRules: {
            type: Array,
            default: () => {
                return [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ];
            }
        },
        captchaRules:{
            type: Array,
            default: () => {
                return [
                    { required: true, message: '验证不能为空', trigger: 'blur' }
                ];
            }
        },
        wantRefresh:{
            type: [String,Number],
            default: () => {
                return '';
            }
        }
    },
    data() {
        return {
            url:'',
            form: {
                username: '',
                password: '',
                captcha:'',
                uuid:'',
                
            }
        };
    },
    computed: {
        rules() {
            return {
                username: this.emailRules,
                password: this.passwordRules,
                captcha: this.captchaRules
            };
        }
    },
    created(){
        this.changeCodeImg()
    },
    watch:{
        wantRefresh (newValue, oldValue) {
            // console.log(`message changed from ${oldValue} to ${newValue}`);
             this.changeCodeImg()
            // 在这里可以执行更多的逻辑
        }
    },
    methods: {
        //
        changeCodeImg(){
           this.form.uuid= Math.floor(Math.random()*4000+1000)
           this.url=process.env.VUE_APP_API_URL+`/captcha.jpg?uuid=${this.form.uuid}`
        },

        handleSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    
                    this.$emit('on-success-valid', {
                        username: this.form.username,
                        password: this.form.password,
                        captcha:this.form.captcha,
                        uuid:this.form.uuid,
                    });
                }
            });
        }
    }
};
</script>
<style scoped lang="less">
.captcha-center{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;
    .captcha{
        width: 35%;
    }
}
</style>